<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="../../public/js/jquery.min.js"></script>
		<title>鼠标从不同方向移入</title>
		<style>
			html,body {
	height:100%;
	overflow:hidden;
}
#wrap {
	width:1170px;
	height:100%;
	margin:0px auto;
}
#wrap ul li {
	position:relative;
	float:left;
	width:230px;
	height:360px;
	list-style:none;
	margin-right:12px;
	overflow:hidden;
}
#wrap ul li img {
	display:block;
}
#wrap ul li .cover {
	position:absolute;
	width:230px;
	height:360px;
	top:0px;
	left:230px;
	background-color: black;
	opacity: 0.5;
}
#wrap ul li .cover p {
	font-size:14px;
	color:#fff;
	text-align:center;
}
#wrap ul li .cover p.p1 {
	padding-top:160px;
}

</style>
	</head>
	<body>
<div id="wrap">
  <ul>
    <li> <img width="230" height="360" src="../../public/images/index/story-01.jpg"/>
      <div class='cover'>
        <p class='p1'> 春夏新品 上新无限 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-02.jpg"/>
      <div class='cover'>
        <p class='p1'> 夏装新品发布 8折起 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-03.jpg"/>
      <div class='cover'>
        <p class='p1'> 春装特惠 买二送一 </p>
        <p> 点击进入 </p>
      </div>
    </li>
     <li> <img width="230" height="360" src="../../public/images/index/story-04.jpg"/>
      <div class='cover'>
        <p class='p1'> 春夏新品 上新无限 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-05.jpg"/>
      <div class='cover'>
        <p class='p1'> 夏装新品发布 8折起 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-06.jpg"/>
      <div class='cover'>
        <p class='p1'> 春装特惠 买二送一 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-01.jpg"/>
      <div class='cover'>
        <p class='p1'> 夏装新品发布 8折起 </p>
        <p> 点击进入 </p>
      </div>
    </li>
    <li> <img width="230" height="360" src="../../public/images/index/story-01.jpg"/>
      <div class='cover'>
        <p class='p1'> 春装特惠 买二送一 </p>
        <p> 点击进入 </p>
      </div>
    </li>
  </ul>
</div>


<script>
	(function() {

    var $li = $('#wrap ul li');

    $li.hover(function(e) {

        move.call(this, e, true);

    },
    function(e) {
        move.call(this, e, false);
    });

    function move(e, bool) {
        var top = $(this).offset().top;
        var bottom = top + $(this).height();
        var left = $(this).offset().left;
        var right = left + $(this).width();

        var x = e.pageX,
        y = e.pageY;

        var sT = Math.abs(y - top),
        sB = Math.abs(y - bottom),
        sL = Math.abs(x - left),
        sR = Math.abs(x - right);

        var a = Math.min(sT, sB, sL, sR);

        switch (a) {
        case sT:
            if (bool) {
                $(this).find('.cover').css({
                    left:
                    0,
                    top: '-360px'
                }).stop().animate({
                    top: 0
                },
                200);
            } else {
                $(this).find('.cover').stop().animate({
                    top: '-360px'
                },
                200);
            }

            break;

        case sB:
            if (bool) {
                $(this).find('.cover').css({
                    left:
                    0,
                    top: '360px'
                }).stop().animate({
                    top: 0
                },
                200);
            } else {
                $(this).find('.cover').stop().animate({
                    top: '360px'
                },
                200);
            }
            break;

        case sL:

            if (bool) {
                $(this).find('.cover').css({
                    top:
                    0,
                    left: '-230px'
                }).stop().animate({
                    left: 0
                },
                200);
            } else {
                $(this).find('.cover').stop().animate({
                    left: '-230px'
                },
                200);
            }

            break;

        case sR:
            if (bool) {
                $(this).find('.cover').css({
                    top:
                    0,
                    left: '230px'
                }).stop().animate({
                    left: 0
                },
                200);
            } else {
                $(this).find('.cover').stop().animate({
                    left: '230px'
                },
                200);
            }
            break;
        }

        //console.log( '距离顶部:'+sT+'   距离底部:'+sB+'   距离左边:'+sL+'   距离右边:'+sR )
    };

})();
</script>
	</body>
</html>
